<?php
/* 
 * semua data diinisialisasi disini
 * agar 1 form ini bisa digunakan untuk tambah dan edit data
 * aturan dari {name} dari field form adalah data[nama_field_database]
 * misal : dalam table jenis kajian ada field nama
 * untuk membuat name dari field form tsb, {name} nya adalah data[nama]
 * proses simpan data menggunakan ajax jquery (bisa dilihat dokumentasinya di jquery)
 * form validationnya menggunakan jquery validation engine (bisa dilihat di google)
 */
 
$username="";
$email="";
$profile_image='';
$nama="";
$website="";
$kota="";
$kota_id="";
$lat="-7.302987489892322";
$lng="112.70922798077208";

foreach($user->result_array() as $row){
	$username=$row['username'];
	$email=$row['email'];
	$profile_image=$row['profile_image'];
	$nama=$row['nama'];
	$website=$row['website'];
	$kota_id=$row['kota_id'];
	$kota=$row['kota'];
	$lat=$row['lat']!=''?$row['lat']:$lat;
	$lng=$row['lng']!=''?$row['lng']:$lng;
}
?>
<section id="content" class="grid_7 alpha omega">
<article>
<h1>Profil Anda</h1>
<div class="success" style="display:none">Success</div>
<div class="error" style="display:none">Error</div>
<form id="form_upload" target="frame" action="<?php echo base_url()."setting/profile"?>" class="styled" method="post" enctype="multipart/form-data" >	
		
		<div class="grid_9 left">
			<label for="name">Gambar Profil  (* gambar yang tidak bernyawa)</label>
			<input type="hidden" id="profile_image" name="data[profile_image]" value="<?php echo $profile_image?>" />
			<img src="<?php echo base_url()?>images/profile/<?php echo $profile_image != ''?$profile_image:'default-128.png'?>"/>
			<input class="textbox" type="file" name="userfile" id="userfile"  />
			
			<label for="tempat">Nama Lengkap</label>
			<input class="textbox validate[required]" type="text"  id="nama" name="data[nama]" value="<?php echo $nama?>"  />
			
			<label for="tempat">Username</label>
			<input class="textbox validate[required]" type="text"  id="username" name="data[username]" value="<?php echo $username?>"  />
			
			<label for="tempat">Email</label>
			<input class="textbox validate[required, custom[email]]" type="text"  id="email" name="data[email]" value="<?php echo $email?>"  />
			
			<label for="tempat">Website</label>
			<input class="textbox" type="text"  id="website" name="data[website]" value="<?php echo $website?>"  />
			
			<label for="kota">Kota [<a href="<?php echo base_url()."setting/kota.html"?>" class="fancybox">Tambah Kota</a>]</label>
			<input id="kota" class="textbox" type="text"  value="<?php echo $kota?>"  />
			<input type="hidden" id="kota_id" name="data[kota_id]" value="<?php echo $kota_id?>" />
			
			<label for="kota">Lokasi Anda</label>
			<div id="map" style="height:300px;float:center;"></div>
			<input type="hidden" id="lat" name="data[lat]" value="<?php echo $lat?>" />
			<input type="hidden" id="lng" name="data[lng]" value="<?php echo $lng?>" />
			
			<input type="submit" value="SIMPAN" class="right button" />
			
		</div>
</form>
</article>
</section>
<section class="cl"></section>
<iframe id="frame" name="frame" width=0 height=0 border=0 ></iframe>
<script>
				
function respon(str){
	 $.fancybox.hideActivity();

	var obj = jQuery.parseJSON(str);
	if(obj.status == 'success'){
		$(".error").hide();
		$(".success").text(obj.msg);
		$(".success").fadeIn(1000);
		window.location = "<?php echo base_url()?>"+obj.url;
	}else{
		$(".success").hide();
		$(".error").text(obj.msg);
		$(".error").fadeIn(1000);
	}
}


$("#form_upload").submit(function(){
	if($(this).validationEngine('validate')){
		 $.fancybox.showActivity();
		$(".error").hide();
		
		return true;
	}
	return false;
});

$(document).ready(function(){

	$("#form_upload").validationEngine();
	
	$("#kota").autocomplete('<?php echo base_url()?>admin/kota/autocomplete.html', {
			autoFill: true,
			minChars: 3,
			mustMatch: true
		}).result(function(data, row) {
			var r = row;
			if (typeof r != 'undefined') {
				$("#kota_id").val(r[1]);
			}
	});
	  
	setTimeout(function(){

		$("#map").gmap3(
			{ action:'init',
				options:{
					center:[<?php echo $lat?>,<?php echo $lng?>],
					zoom: 5
				}
			},
			{ 
				action: 'addMarker',
				lat:<?php echo $lat?>,
				lng:<?php echo $lng?>,
				marker:{
					options:{
						draggable: true,
						animation: google.maps.Animation.DROP
					},
					events:{
						click: function(marker, event, data){
							var map = $(this).gmap3('get'),
							infowindow = $(this).gmap3({action:'get', name:'infowindow'});
							infowindow.open(map, marker);
						},
						dragend: function(marker){
							$(this).gmap3({
								action:'getAddress',
								latLng:marker.getPosition(),
								callback:function(results){
									$("#lat").val(marker.getPosition().lat());
									$("#lng").val(marker.getPosition().lng());
								}
							});
						}
					}
				},
			}
		);
		
	},1000);
	  
});
</script>